<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>成远生产管控平台 - 车辆类型</title>
  <link rel="stylesheet" href="./layui/css/layui.css"/>
  <script src="./layui/layui.js"></script>
  <script>
    // 全局配置
    window.appConfig = {
      // apiBaseUrl: 'http://localhost:8080' // 开发环境
      apiBaseUrl: 'http://59.110.144.74:8080' // 生产环境
    };
  </script>

  <style>
    body {
      padding: 20px;
    }
  </style>
</head>
<body>

<div class="layui-container" style="padding: 20px;">
  <form class="layui-form" id="truckTypeForm" lay-filter="truckTypeForm">
    <input type="hidden" name="id" id="truckTypeId">

    <div class="layui-form-item">
      <label class="layui-form-label">车辆类型</label>
      <div class="layui-input-block">
        <input type="text" name="truckTypeName" id="truckTypeName" required lay-verify="required"
               placeholder="请输入车辆类型名称" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">高度(m)</label>
      <div class="layui-input-block">
        <input type="number" name="height" id="height" required lay-verify="required"
               step="0.01" placeholder="例如：3.5" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">宽度(m)</label>
      <div class="layui-input-block">
        <input type="number" name="width" id="width" required lay-verify="required"
               step="0.01" placeholder="例如：2.4" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <label class="layui-form-label">长度(m)</label>
      <div class="layui-input-block">
        <input type="number" name="length" id="length" required lay-verify="required"
               step="0.01" placeholder="例如：6.2" class="layui-input">
      </div>
    </div>

    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="saveTruckType">保存</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
        <button type="button" class="layui-btn layui-btn-danger" onclick="window.history.back()">返回</button>
      </div>
    </div>
  </form>
</div>

<script>
  layui.use(['form', 'layer', 'jquery'], function () {
    const form = layui.form;
    const layer = layui.layer;
    const $ = layui.jquery;

    // 初始化页面数据（如果是编辑）
    const urlParams = new URLSearchParams(window.location.search);
    const mode = urlParams.get('mode');
    const truckTypeId = urlParams.get('id');
    const truckTypeName = urlParams.get('truckTypeName');
    const height = urlParams.get('height');
    const width = urlParams.get('width');
    const length = urlParams.get('length');

    if (mode === 'edit' && truckTypeId) {
      $('#truckTypeId').val(truckTypeId);
      $('#truckTypeName').val(truckTypeName);
      $('#height').val(height);
      $('#width').val(width);
      $('#length').val(length);
    }

    // 表单提交事件
    form.on('submit(saveTruckType)', function (data) {
      const formData = data.field;
      const isEdit = !!formData.id;

      $.ajax({
        url: window.appConfig.apiBaseUrl +'/truck-type',
        method: isEdit ? 'PUT' : 'POST',
        contentType: 'application/json',
        data: JSON.stringify(formData),
        success: function (res) {
          if (res.code === 0) {
            layer.msg(isEdit ? '更新成功' : '添加成功', { icon: 1 });
            window.location.href = 'admin.html#truckSize';
          } else {
            layer.msg(res.message || '操作失败', { icon: 2 });
          }
        },
        error: function (xhr) {
          layer.msg('请求失败: ' + xhr.statusText, { icon: 2 });
        }
      });

      return false; // 阻止默认提交
    });
  });
</script>

</body>
</html>
